<template>
    <free-app :bgType="'image'" :navbar="{
        title: '我的群组'
    }">
        <view class=" mx-3 mt-208rpx flex flex-col gap-24rpx">
            <view class="p-4 bg-[#0F57C2]  flex gap-26rpx rounded-3">
                <image src="../../static/images/group/add.png" class="w-66rpx h-66rpx"></image>
                <view class="flex flex-col gap-6rpx ">
                    <view class="text-32rpx text-white">添加员工</view>
                    <view class="text-24rpx ">多人协调管理</view>
                </view>
            </view>


            <template v-for="(item, index) in List" :key="index" >
            <wd-swipe-action>
                    <view class="flex p-3 gap-2">
                    <image :src="item.url" class="w-84rpx h-84rpx"></image>
                    <view class="gap-6rpx flex flex-col">
                        <view class="flex">
                            <view class="text-32rpx font-500">{{ item.address }}</view>
                            <view class="ml-rpx">{{ item.name }}</view>
                        </view>
                        <view class="color-text-3">{{ item.time }}</view>
                    </view>
                </view>

                
                <template #right>
                    <view class="bg-red size-76rpx  center p-28rpx text-28rpx rounded-r-20rpx text-white">删除</view>
                </template>

            </wd-swipe-action>
        </template>




        </view>


    </free-app>




</template>

<script setup>

import { ref } from 'vue'
const List = ref([
    {
        url: "../../static/images/group/head1.png",
        address: "永丰手机维修（芦墟镇）",
        name: "店主",
        time: "2024-10-25 15:22"
    },
    {
        url: "../../static/images/group/head2.png",
        address: "永丰手机维修（芦墟镇）",
        name: "店主",
        time: "2024-10-25 15:22"
    },
    {
        url: "../../static/images/group/head3.png",
        address: "永丰手机维修（芦墟镇）",
        name: "店主",
        time: "2024-10-25 15:22"
    },
    {
        url: "../../static/images/group/head4.png",
        address: "永丰手机维修（芦墟镇）",
        name: "店主",
        time: "2024-10-25 15:22"
    },
    {
        url: "../../static/images/group/head5.png",
        address: "永丰手机维修（芦墟镇）",
        name: "店主",
        time: "2024-10-25 15:22"
    }
])
</script>